
    <div style="position: absolute; top: 15px; left: 15px;z-index: 20">
    <div id="nav">
<a href="/">Home</a>    - <a href="/product-gallery">Product Gallery</a></div></div>

<div id="product-gallery-banner">

<?php if ($images = $this->get_data('images')):?>
<div id="product_galelry_slider">
<?php foreach ($images as $image):?>
<div class="slider_item">
<?php 
    if ($image['link']) {
        echo '<a href="' . tos_url($image['link']) . '">' . tos_img($image['src']) . '</a>';
    } else {
        echo tos_img($image['src']);
    }

?>
</div>
<?php endforeach;?>
</div>

<?php endif;?>

</div>
<div id="slider_nav"></div>
<div id="product-gallery-bar">
    <div id="product-gallery-list">
        <?php m('rdf')->block_product_gallery_list()->display(); ?>
    </div>
        <script type="text/javascript">
  //<img onmouseover="move_left();" onmouseout="move_stop();" src="/rdf/img/move-left.jpg" />
    var banner_slider = document.getElementById('product_galelry_slider');
    var slider_count = <?php echo count($images);?>;
    banner_slider.style.top = '0px';
    banner_slider.style.left = '0px';
    banner_slider.style.width = (956 * slider_count) + 'px';

    var banner_slider_index = 1;
    var _selected_li;
    var _lis = [];
    
    window.onload = function () {
        if (slider_count > 1) {
            var ul_nav = document.createElement('ul');
            document.getElementById('slider_nav').appendChild(ul_nav);
            for (var i = 0; i < slider_count; i++) {
                var li = document.createElement('li');
                li.innerHTML = '<a href="javascript:;" onclick="move_slider(this,' + i + ')">' + i + '</a>';
                ul_nav.appendChild(li);
                _lis[i] = li;
            }
            _selected_li = _lis[0];
            _selected_li.firstChild.className = 'selected';

            var images = banner_slider.getElementsByTagName('img');
            var length = images.length;
            for (var i = 0; i < length; i++) {
                var image = images[i];
                var m_left = Math.floor((956 - image.offsetWidth) / 2);
                var m_top = Math.floor((375 - image.offsetHeight) / 2);
                image.style.marginLeft = m_left + 'px';
                image.style.marginTop = m_top + 'px';
            }

            
            setInterval(function () {
                move_slider(null, banner_slider_index);
                banner_slider_index ++;
                banner_slider_index = banner_slider_index % slider_count;
            }, 5000);
        }
    };

    
    var is_slider_moving = false;
    
    function move_slider(target, index) {
        if ( ! is_slider_moving) {
            _move_slider(target, index);
        }
    }
    
    function _move_slider(target, index) {
        banner_slider_index = index;
        is_slider_moving = true;
        var dest_pos = index * (-956);
        var slider_pos = parseInt(banner_slider.style.left);
        
        var diff = dest_pos - slider_pos;
        var step = diff / 2;
        if (Math.abs(diff) < 20) {
            step = diff;
            banner_slider.style.left = (slider_pos + step) + 'px';
            if (_selected_li) {
                _selected_li.firstChild.className = '';
            }
            _selected_li = _lis[index];
            _selected_li.firstChild.className = 'selected';
            
            is_slider_moving = false;
        } else {
            banner_slider.style.left = (slider_pos + step) + 'px';
            setTimeout(function () {
                _move_slider(target, index);
            }, 200);
        }
    }
    
    
  
  
    var container = document.getElementById('product-gallery-list');
    var slider = document.getElementById('product-gallery-table');
    
    if (slider.offsetWidth > 916) {
        var leftArrow = document.createElement('img');
        var rightArrow = document.createElement('img');

        leftArrow.style.position = 'absolute';
        rightArrow.style.position = 'absolute';

        leftArrow.style.top = '0px';
        rightArrow.style.top = '0px';
        leftArrow.style.left = '0px';
        rightArrow.style.right = '0px';
        
        
        container.style.overflow = 'hidden';
        container.style.width = '964px';
        container.style.height = '116px';
        container.style.position = 'relative';

        slider.style.position = 'absolute';
        slider.style.top = '0px';
        slider.style.left = '24px';
        slider.style.margin = '0';

        leftArrow.src = z.cdn_url('rdf_img/move-left-small.jpg');
        rightArrow.src = z.cdn_url('rdf_img/move-right-small.jpg');

        leftArrow.onmouseover = move_left;
        rightArrow.onmouseover = move_right;

        leftArrow.onmouseout = move_stop;
        rightArrow.onmouseout = move_stop;

        container.appendChild(leftArrow);
        container.appendChild(rightArrow);
    }
    
    

    var step = 0;
    

    
    function move_stop() {
        step = 0;
    }
    function move_left() {
        step = 25;
        sli_move();
    }
    function move_right() {
        step = -25;
        sli_move();
    }
    function sli_move() {
        
        var x=0;
        var sli = slider;
        var xMin = 964 - (slider.offsetWidth + 48);
        var xMax = 24;
        
        x = parseInt(sli.style.left) + step;
        
        if (step !=0 && x < xMax && x > xMin) {
            sli.style.left = x + "px";
            setTimeout("sli_move()", 100);
        } else if ( x >= xMax) {
            sli.style.left = xMax + "px";
            step = 0;
        } else if ( x <= xMin ) {
            sli.style.left = xMin + "px";
            step = 0;
        }
        
    }

    
    </script>
    
    
    </div>    <div class="clear"></div>